// 获取输入框
const input = document.getElementById('choicesInput');
// 获取选项容器
const container = document.querySelector('.choices');
// 监听onchange事件
input.addEventListener('keyup', (e) => {
  if (e.key !== 'Enter') {
    // 对输入的值进行分割
    let value = e.target.value;
    let innerHtml = value
      ?.split(',')
      .map((choice) => choice && `<span>${choice}</span>`)
      .join('');
    container.innerHTML = innerHtml;
  } else {
    // 在选项中随机跳跃，选中一个
    getRandomIndex();
  }
});

const getRandomIndex = () => {
  // 跳跃次数
  const times = 30;

  let timer = setInterval(setStyle, 100);

  // if (count >= choices.length) {
  //   clearInterval(timer);
  // }
  setTimeout(() => {
    clearInterval(timer);
    setTimeout(() => {
      // 获取随机值
      let span = getRandomChoice();
      // 增加active的样式
      span.classList.add('active');
    }, 100);
  }, times * 100);
};

const setStyle = () => {
  // 获取随机值
  let span = getRandomChoice();
  if (span) {
    // 增加active的样式
    span.classList.add('active');
    // 延迟清掉所有选中的样式
    setTimeout(() => {
      span.classList.remove('active');
    }, 100);
  }
};

// 获取随机元素
const getRandomChoice = () => {
  // 获取所有的选项
  let choices = document.querySelectorAll('.choices span');
  return choices[Math.floor(Math.random() * choices.length)];
};
